<!DOCTYPE HTML>
<!--
	Dimension by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
 <head>
  <title>
   Dimension by HTML5 UP
  </title>
  <!-- <meta charset="utf-8" /> -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> -->
  <meta charset="utf-8"/>
  <meta content="width=device-width,initial-scale=1.0" name="viewport"/>
  <link href="../../assets/css/article.css" rel="stylesheet"/>
  <link href="https://cdn.bootcss.com/highlight.js/9.15.8/styles/github.min.css" rel="stylesheet"/>
  <noscript>
   <link href="../../assets/css/noscript.css" rel="stylesheet"/>
  </noscript>
 </head>
 <body>
  <div id="app">
  </div>
  <!-- built files will be auto injected -->
 </body>
 <body class="is-preload">
  <!-- Wrapper -->
  <div id="wrapper">
   <!-- Main -->
   <div id="main">
    <article id="article">
     <h1 id="vscode">
      VSCode 使用配置记录
     </h1>
     <hr/>
     <p>
      这是我参与2022首次更文挑战的第26天，活动详情查看：
      <a href="https://juejin.cn/post/7052884569032392740">
       2022首次更文挑战
      </a>
     </p>
     <h2 id="_1">
      简介
     </h2>
     <p>
      vscode作为一款开发神器，日常开发中经常和它打交道，现在基本上写博客之类的，都是使用的vscode，本篇就介绍下博主的常用配置
     </p>
     <h2 id="_2">
      安装配置
     </h2>
     <p>
      <em>
       配置完后大致样子如下
      </em>
     </p>
     <p>
      <img alt="" src="./picture/vscode1.png"/>
     </p>
     <h3 id="_3">
      插件
     </h3>
     <ul>
      <li>
       Windows opacity:该插件提供了窗口的透明效果，该效果可能不是每个人都接受。但根据我的使用体验，这个插件除了美化，在有时我需要对照着其他页面输入数据，我能够直接透过 VSCode 的页面看到底下的数据，这样我就不用分屏或者切屏了。
      </li>
      <li>
       vscode-icons:文件图片样式，好看
      </li>
      <li>
       Instant Markdown:Markdown 文档浏览器查看，好用，必备
      </li>
      <li>
       One Monokai Theme:好看的主题，不错
      </li>
      <li>
       Vim:不用不习惯，个人选择
      </li>
      <li>
       settings-sync:配置备份同步
      </li>
      <li>
       TODO Highlight：TODO list
      </li>
      <li>
       WakaTime ：统计在 VS Code 里写代码的时间
      </li>
      <li>
       Code Time：记录编程时间，统计代码行数。
      </li>
      <li>
       Markdown All in One：这个插件将帮助你更高效地在 Markdown 中编写文档。
      </li>
      <li>
       Prettier - Code formatter：Prettier 是一个代码格式化工具，只关注格式化，但不具备校验功能。
      </li>
      <li>
       indent-rainbow：突出显示代码缩进
      </li>
      <li>
       Code Spell Checker：单词拼写错误检查
      </li>
      <li>
       docs-markdown : Markdown补全
      </li>
     </ul>
     <h3 id="_4">
      字体
     </h3>
     <ul>
      <li>
       <a href="https://github.com/tonsky/FiraCode/releases/download/5.2/Fira_Code_v5.2.zip">
        Fira Code:点击 ttf 进行安装即可，还是比较好看的
       </a>
      </li>
     </ul>
     <h4 id="_5">
      修改字体
     </h4>
     <p>
      设置中搜索 editor.fontLigatures 然后设置
     </p>
     <div class="codehilite">
      <pre><span></span><code>// 启用字体连字
<span class="s2">"editor.fontLigatures"</span>: false,
// 以像素为单位控制字号。
<span class="s2">"editor.fontSize"</span>: <span class="m">14</span>,
// 控制字体粗细。
<span class="s2">"editor.fontWeight"</span>: <span class="s2">"normal"</span>,
<span class="s2">"editor.fontFamily"</span>: <span class="s2">"Fira Code"</span>, //后边的引号中写上要设置的字体类型，个人比较喜欢Fira Code
<span class="s2">"editor.fontLigatures"</span>: true, //这个控制是否启用字体连字，true启用，false不启用，这里选择启用
<span class="s2">"editor.fontSize"</span>: <span class="m">15</span>, //设置字体大小，这个不多说都明白
</code></pre>
     </div>
     <h3 id="_6">
      设置背景图片
     </h3>
     <ul>
      <li>
       <a href="https://www.cnblogs.com/chinabin1993/p/7151361.html">
        vscode设置背景图片
       </a>
      </li>
     </ul>
     <div class="codehilite">
      <pre><span></span><code>    // 设置背景图片
    <span class="s2">"background.enabled"</span>: true,
    <span class="s2">"background.useDefault"</span>: false,
    <span class="s2">"background.customImages"</span>: <span class="o">[</span>
        <span class="s2">"file:///D:/Download/1.jpeg"</span>
    <span class="o">]</span>,
    <span class="s2">"background.style"</span>: <span class="o">{</span>
        <span class="s2">"content"</span>: <span class="s2">"''"</span>,
        <span class="s2">"pointer-events"</span>: <span class="s2">"none"</span>,
        <span class="s2">"position"</span>: <span class="s2">"absolute"</span>,
        <span class="s2">"z-index"</span>: <span class="s2">"99999"</span>,
        <span class="s2">"width"</span>: <span class="s2">"100%"</span>,
        <span class="s2">"height"</span>: <span class="s2">"100%"</span>,
        <span class="s2">"background-position"</span>: <span class="s2">"center"</span>,
        <span class="s2">"background-repeat"</span>: <span class="s2">"no-repeat"</span>,
        <span class="s2">"background-size"</span>: <span class="s2">"100%,100%"</span>,
        <span class="s2">"opacity"</span>: <span class="m">0</span>.1
    <span class="o">}</span>
</code></pre>
     </div>
     <h3 id="ctrl">
      Ctrl等快捷键使用还原
     </h3>
     <p>
      可以通过 File -&gt; Preference -&gt; Settings中   vim.useCtrlKeys 选项设置为 false
     </p>
     <h2 id="_7">
      参考链接
     </h2>
     <ul>
      <li>
       <a href="https://zhuanlan.zhihu.com/p/164852197">
        Windows 下如何配置好看且好用的 VSCODE 环境
       </a>
      </li>
      <li>
       <a href="https://medium.com/@hjgraca/style-your-windows-terminal-and-wsl2-like-a-pro-9a2e1ad4c9d0">
        Style your Windows terminal and use WSL and PowerShell like a pro
       </a>
      </li>
      <li>
       <a href="https://github.com/JanDeDobbeleer/oh-my-posh?WT.mc_id=-blog-scottha#installation">
        JanDeDobbeleer/oh-my-posh
       </a>
      </li>
      <li>
       <a href="https://zhuanlan.zhihu.com/p/62913725">
        第一次使用VS Code时你应该知道的一切配置
       </a>
      </li>
      <li>
       <p>
        <a href="https://www.zhihu.com/question/58630229/answer/191984051">
         如何实现Github markdown 目录/页内跳转？
        </a>
       </p>
      </li>
      <li>
       <p>
        <a href="https://sspai.com/post/53327">
         免费好用的全平台 Markdown 编辑器，你可以自己「做」一个
        </a>
       </p>
      </li>
      <li>
       <a href="https://zhuanlan.zhihu.com/p/62913725">
        第一次使用VS Code时你应该知道的一切配置
       </a>
      </li>
     </ul>
    </article>
   </div>
   <!-- Footer -->
   <footer id="footer">
    <p class="copyright">
     © Untitled. Design:
     <a href="https://html5up.net">
      HTML5 UP
     </a>
     .
    </p>
   </footer>
  </div>
  <!-- BG -->
  <div id="bg">
  </div>
  <!-- Scripts -->
  <script src="../assets/js/jquery.min.js">
  </script>
  <script src="../assets/js/browser.min.js">
  </script>
  <script src="../assets/js/breakpoints.min.js">
  </script>
  <script src="../assets/js/util.js">
  </script>
  <script src="../assets/js/main.js">
  </script>
 </body>
</html>
